<template>
    <div class="fluid">
        <div class="container">
            <p><img src="../../assets/img/indexHeader/1.png" class="imgOne" @click="routeIndex"></p>
            <div class="left">
                <p>高效率流量整合+AI智投营销平台 = 一站式营销方案</p>
                <img src="../../assets/img/登陆注册/3.png">
                <p>联系我们，免费获取营销方案</p>
            </div>
            <div class="right">
                <div class="rightContainer">
                    <ul>
                        <li v-for="(item ,index) in login" :key="index" :class="{bg:index==show,nobg:index!=show}">
                            <a href="javascript:;" @click="change(index)">{{item}}</a>
                        </li>
                    </ul>
                    <div>
                        <login-pwd v-if="show==0"></login-pwd>
                        <login-yzm v-if="show==1"></login-yzm>
                    </div>
                </div>
                <button class="finally" @click="$router.push('/regist')">还没注册？点此免费注册</button>
            </div>
        </div>
    </div>
</template>
<script>
import loginPwd from './loginPwd.vue';
import loginYzm from './loginYzm.vue';
export default {
    data(){
        return {
            login:["密码登陆","验证码登陆"],
            show:0
        }
    },
    methods:{
        change(index){
            this.show = index
            
        },
        routeIndex(){
            this.$router.push({path:"/"})
        }
    },
    components:{
        loginPwd,
        loginYzm
    }
}
</script>
<style scoped>
.fluid{
    width:100%;
    height: 100%;
    background: url("../../assets/img/登陆注册/2.png");
    overflow: hidden;
    background-color:#f8f9fd;
    position: absolute;
}
.imgOne{
    margin-top: 40px;
}
.container{
    width:1200px;
    margin:0 auto;
    position: relative;
    overflow: hidden;
    height: 100%;
}
.left{
    float: left;
    position: relative;
}
.left>p:nth-child(1){
    font-size: 30px;
    color:rgb(34, 34, 34);
    margin-top: 225px;
}
.left>img:nth-child(2){
    margin-top: 27px;
}
.left>p:nth-child(3){
    font-size: 18px;
    color:#fff;
    position: absolute;
    left:22px;
    top:295px;
}
.right{
    float: right;
    width:432px;
    background:#fff;
    bottom: 0;
    margin-top:100px;
}
.rightContainer{
    width:352px;
    margin:0 auto;
    overflow: hidden;
    margin-top: 80px;
}
.rightContainer>ul>li{
    width:50%;
    float:left;
    text-align: center;
    padding-bottom: 20px;
   border-bottom: 1px solid #eee;
}
.rightContainer>ul>li.bg{
    background: url("../../assets/img/登陆注册/注册/5.png") no-repeat bottom 0px left 41px;

}
.rightContainer>ul>li.nobg{
    /* background: url("../../assets/img/登陆注册/注册/4.png") no-repeat bottom; */
}
.rightContainer>ul>li>a{
    font-size: 24px;
    color:rgb(34, 34, 34);
    font-family: PingFang SC;
}
.rightContainer>div{
    margin-top: 60px;
    overflow: hidden;
}
.right>button{
       width:100%;
       height: 50px;
       margin-top: 30px;
       color: #fff;
       font-size: 18px;
       background: rgb(237, 64, 64);
       margin-top: 60px;
   }
</style>


